{% extends "base.html" %} {% block title %}反欺诈云Beta{% endblock %} {% block headpre %}
<link rel="stylesheet" href="static/plugins/select2/select2.min.css">
<link rel="stylesheet" href="static/plugins/datatables/dataTables.bootstrap.css"> {% endblock %} {% block head %}
<script src="static/plugins/echarts.js"></script>
<script src="static/plugins/walden.js"></script>
<script src="static/js/jquery.ba-resize.js"></script>
{% endblock %} {% block contentheader %}反欺诈图{% endblock %} {% block contentsmallheader %}在图数据库基础上对海量数据的关联关系进行查询分析{% endblock
%} {% block content %}
<div class="row">
    <div class="col-md-3">
        <div class="box box-primary ng-scope" style="min-width:360px;">
            <div class="box-header with-border">
                <h5 class="box-title">接入Hbase的图</h5>
            </div>
            <div class="box-body">
                <div class="form-group">
                    <div class="input-group-addon" style="color:white;background-color: #3c8dbc;border-color: #367fa9">
                        &nbsp;&nbsp;Graphs:&nbsp;&nbsp;
                    </div>
                    <select class="form-control select2" style="width: 100%;" id="select_cubes">
                        {% for g in graphs %}
                            <option value={{ g }}>{{ g }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="callout callout-info" id="table_desc">
                    <p style="word-wrap:break-word;word-break:break-all;">
                    </p>
                </div>
                <hr style="width:100%;height:1px;border:none;border-top:1px solid #555555;" />
                <div class="nav-tabs-custom" style="margin-bottom: 0px">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#home" data-toggle="tab">
                                入口顶点选项参数</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="home">
                            <div class="input-group ">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false" id="key_type_button"
                                        style="width: 100px">请选择 <span
                                    class="fa fa-caret-down"></span></button>
                                    <ul class="dropdown-menu" id="key_type">

                                    </ul>
                                </div>
                                <!-- /btn-group -->
                                <input type="text" placeholder="默认选取查询结果的第一项" class="form-control" id="key_text">
                            </div>
                            <br/>
                            <button class="btn btn-primary" id="submit_ext">提交选项</button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-9" id="result_panel">
        <div id="basic_cavans" hidden style="height:750px;width:100%;border:groove;">
        </div>
    </div>
    <div hidden id='hidden_txt'></div>
</div>
{% endblock %} {% block script %}
<script>
    // function add_class() {
    //     $('#treeview6').addClass('active');
    //     $('#menu6').addClass('menu-open');
    //     $('#reportdatagraph').addClass('active');
    // }
    // $('#hidden_txt').text(JSON.stringify(result.data));
    // JSON.parse($('#hidden_txt').text())
    var myChart = null;
    var option = {
        title: {
            text: null,
            top: 'top',
            left: 'center'
        },
        // tooltip: { formatter: "values 1:{a}<br/>values 2:{b}<br/>values 3:{c}<br/>values 4:{d}" },
        tooltip: {
            formatter: function (params, ticket, callback) {
                var html = "Id : <b>" + params.data.name + "</b><br/>Label : <b>" + params.data.category + "</b><br/>Properties : <b><pre>" + params.data.value + '</pre></br>';
                return html;
            }
        },
        series: [
            {

                categories: null,
                type: 'graph',
                layout: 'force',
                symbolSize: 40,
                roam: true,
                draggable: true,
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [4, 8],
                force: {
                    repulsion: 2000,
                    edgeLength: [100, 200],
                },
                label: {
                    normal: {
                        show: true,
                        position: "bottom",
                        formatter: '{b}',
                        textStyle: {
                            fontSize: 6
                        }
                    }
                },
                edgeLabel: {
                    normal: {
                        show: true,
                        formatter: function (params, ticket, callback) {
                            return params.data.category;
                        },
                        textStyle: {
                            fontSize: 6
                        }
                    }
                },
                data: [],
                links: [],
                lineStyle: {
                    normal: {
                        opacity: 0.9,
                        width: 2,
                        curveness: 0
                    }
                }
            }
        ]
    };
    function graphresize() {
        $(function () {
            $('#basic_cavans').parent().resize(function () {
                myChart.resize({});
            });
        });
    };
    function getrelationship(param) {
        $.ajax({
            url: '/data_report_graph_query_relation',
            data: {
                'vertexid': param.name,
                'table_name': $("#select_cubes").find("option:selected").text()
            },
            success: function (data) {
                $('#basic_cavans').empty();
                var graph_data = JSON.parse($('#hidden_txt').text())
                graph_data.data.push.apply(graph_data.data, data.data.data)
                graph_data.links.push.apply(graph_data.links, data.data.links)
                graph_data.categories.push.apply(graph_data.categories, data.data.categories)
                var hash1 = {}; var hash2 = {}; var hash3 = {};
                graph_data.data = graph_data.data.reduce(function (item, next) {
                    hash1[next.name] ? '' : hash1[next.name] = true && item.push(next);
                    return item
                }, [])
                graph_data.links = graph_data.links.reduce(function (item, next) {
                    hash2[next.source + next.target] ? '' : hash2[next.source + next.target] = true && item.push(next);
                    return item
                }, [])
                graph_data.categories = graph_data.categories.reduce(function (item, next) {
                    hash3[next.name] ? '' : hash3[next.name] = true && item.push(next);
                    return item
                }, [])
                option.series[0].data = graph_data.data;
                option.series[0].links = graph_data.links;
                option.series[0].categories = graph_data.categories;
                option.title.text = "图：" + $("#select_cubes").find("option:selected").text() + ' 查询结果';
                echarts.dispose(myChart);
                myChart = echarts.init(document.getElementById('basic_cavans'));
                myChart.setOption(option);
                myChart.on('dblclick', getrelationship);
                $('#hidden_txt').text(JSON.stringify(graph_data));
                graphresize();
            }
        });
    }

    $('#submit_ext').on("click", function (e) {
        key_text = $('#key_text').val().trim();
        key_type = $('#key_type_button').text().trim();
        $('#basic_cavans').hide();
        $('#hidden_txt').text("");
        var table_name = $("#select_cubes").find("option:selected").text();
        if (key_text != '' && key_type != '请选择') {
            $.ajax({
                url: '/data_report_graph_query_vertex',
                data: {
                    'key': key_type,
                    'value': key_text,
                    'table_name': table_name
                },
                success: function (data) {
                    obj = data.data
                    if (obj.status == 'ok') {
                        $('#basic_cavans').show();
                        option.series[0].data = [obj];
                        option.series[0].links = [];
                        option.series[0].categories = [];
                        if (myChart != null) {
                            echarts.dispose(myChart);
                        }
                        option.title.text = "图：" + table_name + ' 查询结果';
                        var current_objs = { "data": [obj], "links": [], 'categories': [] }
                        myChart = echarts.init(document.getElementById('basic_cavans'));
                        myChart.setOption(option);
                        myChart.on('dblclick', getrelationship);
                        $('#hidden_txt').text(JSON.stringify(current_objs));
                        graphresize();
                    }
                }
            });
        }
    });
    var graph_basic = {{ schema|safe }}
    function formatGraph(graph_basic) {
        return "<b>顶点Label：</b>" + graph_basic[0].vertexLabels.join(' ; ') + "<br/>" + "<b>顶点index：</b>" + graph_basic[2].vertexIndices.join(' ; ') + "<br/>" + "<b>顶点properties：</b>" + graph_basic[4].vertexProperties.join(' ; ') + "<br/>" + "<b>边Label：</b>" + graph_basic[1].edgeLabels.join(' ; ') + "<br/>" + "<b>边index：</b>" + graph_basic[3].edgeIndices.join(' ; ') + "<br/>" + "<b>边properties：</b>" + graph_basic[5].edgeProperties.join(' ; ');
    }
    var table_desc = formatGraph(graph_basic);
    $('#table_desc p').html(table_desc);
    for (var i = 0; i < graph_basic[4].vertexProperties.length; i++) {
        $('#key_type').append("<li><a>" + graph_basic[4].vertexProperties[i] + "</a></li>")
    }
    $('#select_cubes').on("change", function (e) {
        var cube_name = $("#select_cubes").find("option:selected").text();
        $.ajax({
            data: { cube_name: cube_name },
            url: '/data_report_graph_change',
            success: function (data) {
                graph_basic = data.data
                table_desc = formatGraph(graph_basic);
                $('#table_desc p').html(table_desc);
                $('#key_type').empty()
                for (var i = 0; i < graph_basic[4].vertexProperties.length; i++) {
                    $('#key_type').append("<li><a>" + graph_basic[4].vertexProperties[i] + "</a></li>")
                }
                $('#key_type_button').html('请选择 ' + '<span class="fa fa-caret-down"></span>');
                li_select();
                $('#basic_cavans').hide();
            }
        });
    });
    function li_select() {
        $('#key_type li').on('click', function (e) {
            $('#key_type_button').html(e.target.innerText + ' <span class="fa fa-caret-down"></span>');
        });
    }
    li_select();

</script>
{% endblock %}